<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form ref="requestParameters">
          <div class="filter-container">
            <el-form-item>
              <el-input
                v-model="searchTitle"
                class="filter-item"
                style="width: 200px;
                margin-left: unset;"
                placeholder="根据用户名搜索"
              />
              <el-button class="filter-item" size="small" @click="searchTitle=''">清除</el-button>
              <el-button
                class="filter-item"
                size="small"
                type="primary"
                @click="searchRes"
              >搜索</el-button>
            </el-form-item>
            <el-button
              class="filter-item"
              size="small"
              style="margin-left: 10px;height: 36px;"
              type="success"
              icon="el-icon-edit"
              @click="addPermission"
            >新增权限组</el-button>
          </div>
        </el-form>
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          show-icon
          :closable="false"
        />
        <!-- 表格 -->
        <template>
          <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0,0,0,0.8)"
            :data="tableData"
            style="width: 100%;padding-top: 20px "
          >
            <el-table-column
              type="selection"
              width="100"
            />
            <el-table-column
              prop="title"
              label="用户名"
              align="center"
            />
            <el-table-column
              prop="create_date"
              label="日期"
              align="left"
              sortable
            > <template slot-scope="scope">
              {{
                scope.row.create_date | formatDate
              }}
            </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" circle type="primary" plain size="medium" @click="editPermissionn(scope.row.id)" />
                <el-button icon="el-icon-delete" circle type="danger" plain size="medium" @click="deletePermission(scope.row.id)" />
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <PageTool
            style="margin-top:15px"
            align="right"
            :total="page.total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          />
        </template>
      </el-card>
    </div>
    <permissions-add
      ref="permissionsAdd"
      :text="text"
      :page-title="pageTitle"
      :rule-inline="ruleInline"
      @handleCloseModal="handleCloseModal"
      @newDataes="newDate"
    />
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
  .filter-container {
    display: flex;
    justify-content:space-between;
    .filter-item {
      margin-left: 10px;
    }
    // .btn {
    //   position:relative;
    //   overflow: hidden;
    // }
    // .btn::before {
    //   content:'';
    //   position: absolute;
    //   background-color: red;
    //   width: 200px;
    //   height: 200px;
    //   z-index: -2;
    //   left: 50%;
    //   top: 50%;
    //   transform-origin: 0 0;
    //   animation:rotate 3s infinite linear;
    // }
    // .btn::after {
    //   content:'';
    //   position: absolute;
    //   background-color: skyblue;
    //   width:calc(100% - 4px);
    //   height: calc(100% - 4px);
    //   left: 2px;
    //   top: 2px;
    //   border-radius: 3px;
    // }
    // @keyframes rotate {
    //   to {
    //     transform:rotate(1turn)
    //   }
    // }
  }
  .el-form-item {
    margin-bottom: unset;
  }
</style>
<script>
import { list, remove } from '../../api/base/permissions'
import permissionsAdd from '../components/permissions-add.vue'
import PageTool from './../components/page-tool'
export default {
  name: 'BasePermissions',
  components: { permissionsAdd, PageTool },
  data() {
    return {
      loading: false,
      tableData: [],
      page: {
        page: 1,
        pagesize: 10,
        total: null
      },
      text: '',
      pageTitle: '权限组',
      alertText: '',
      ruleInline: {
        title: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
      },
      searchTitle: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      const { data } = await list(this.page)
      this.tableData = data.list
      this.page.total = data.list.length
      this.alertText = `共 ${this.page.total} 条记录`
      this.loading = false
    },
    handleSizeChange(val) {
      this.page.pagesize = val
      if (this.page.page === 1) {
        this.getList(this.page)
      }
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.getList()
    },
    handleCloseModal() {
      // this.$refs.permissionsAdd.handleResetForm()
      this.$refs.permissionsAdd.dialogFormH()
    },
    addPermission() {
      this.text = '创建'
      this.$refs.permissionsAdd.handleResetForm()
      this.$refs.permissionsAdd.dialogFormV()
      this.getList
    },
    editPermissionn(id) {
      this.text = '编辑'
      // 子节点有对应的编辑方法，我们在这里只要传递id进去即可
      this.$refs.permissionsAdd.hanldeEditForm(id)
      this.$refs.permissionsAdd.dialogFormV()
    },
    async deletePermission(id) {
      try {
        await this.$confirm('确认要删除吗？')
        var data = {
          id: id
        }
        await remove(data)
        // this.page.page = Math.ceil((this.page.counts - 1) / this.page.pagesize)
        this.getList()
        this.$message.success('删除成功!')
      } catch (err) {
        console.log(err)
      }
    },
    async newDate(obj) {
      this.loading = true
      const { data } = await list()
      this.tableData = data.list
      this.page.total = data.list.length
      this.alertText = `共 ${this.page.total} 条记录`
      this.loading = false
    },
    async searchRes() {
      var obj = {
        page: this.page.page,
        pagesize: this.page.pagesize,
        title: this.searchTitle
      }
      const { data } = await list(obj)
      this.searchTitle = ''
      this.tableData = data.list
      this.page.total = data.list.length
      this.alertText = `共 ${this.page.total} 条记录`
    }
  }
}
</script>
